<!DOCTYPE html>

<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->

<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->

<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->

<!-- BEGIN HEAD -->

<head>

	<meta charset="utf-8" />

	<title><{:L('hjjp_title')}> | <{:L('foodinformation')}> | <{:L('foodfeature')}></title>

	<meta content="width=device-width, initial-scale=1.0" name="viewport" />

	<meta content="" name="description" />

	<meta content="" name="author" />

	<!-- BEGIN GLOBAL MANDATORY STYLES -->

	<link href="__PUBLIC__/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>

	<link href="__PUBLIC__/css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css"/>

	<link href="__PUBLIC__/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>

	<link href="__PUBLIC__/css/style-metro.css" rel="stylesheet" type="text/css"/>

	<link href="__PUBLIC__/css/style.css" rel="stylesheet" type="text/css"/>

	<link href="__PUBLIC__/css/style-responsive.css" rel="stylesheet" type="text/css"/>

	<link href="__PUBLIC__/css/<{$ctype}>.css" rel="stylesheet" type="text/css" id="style_color"/>

	<link href="__PUBLIC__/css/uniform.default.css" rel="stylesheet" type="text/css"/>
	
	<link href="__PUBLIC__/css/scojs.css" rel="stylesheet" type="text/css"/>

	<!-- END GLOBAL MANDATORY STYLES -->

	<!-- BEGIN PAGE LEVEL STYLES -->

	<link rel="stylesheet" href="__PUBLIC__/css/select2_metro.css" />

	<link rel="stylesheet" href="__PUBLIC__/css/DT_bootstrap.css" />
	
	<link rel="stylesheet" type="text/css" href="__PUBLIC__/css/jquery-ui-1.10.1.custom.min.css" />

	<link href="__PUBLIC__/css/bootstrap-modal.css" rel="stylesheet" type="text/css"/>

	<!-- END PAGE LEVEL STYLES -->

	<link rel="shortcut icon" href="__PUBLIC__/image/favicon.ico" />

</head>

<!-- END HEAD -->

<!-- BEGIN BODY -->

<body class="page-header-fixed">
	
	<include file="Public/header" />

	  	<include file="Public/nav" />
	  	
			<!-- BEGIN PAGE TITLE & BREADCRUMB-->

						<h3 class="page-title">

							<{:L('foodinformation')}> <small><{:L('foodfeature')}><{:L('mangage')}></small>

						</h3>

						<ul class="breadcrumb">

							<li>

								<i class="icon-home"></i>

								<a href="__ROOT__/Index/index.html"><{:L('home')}></a> 

								<i class="icon-angle-right"></i>

							</li>

							<li>

								<a href="#"><{:L('foodinformation')}></a>

								<i class="icon-angle-right"></i>

							</li>

							<li><a href="#"><{:L('foodfeature')}></a></li>

						</ul>

						<!-- END PAGE TITLE & BREADCRUMB-->

					</div>

				</div>

				<!-- END PAGE HEADER-->

				<!-- BEGIN PAGE CONTENT-->

				<div class="row-fluid">

					<div class="span12">
						
						<div class="portlet box light-grey">

							<div class="portlet-title">

								<div class="caption"><i class="icon-cogs"></i><{:L('foodfeature')}></div>

								<div class="tools">

									<a href="javascript:;" class="reload"></a>

								</div>

							</div>

							<div class="portlet-body" id="foodlist">

								<table class="table table-striped table-bordered table-hover table-full-width" id="feature_table">

									<thead>

										<tr>

											<th class="span1"><{:L('number')}></th>

											<th class="span3"><{:L('name')}></th>

											<th class="span2"><{:L('foodsauce')}></th>

											<th class="span2"><{:L('foodtaste')}></th>

											<th class="span3"><{:L('foodfeature')}></th>

											<th class="span1"><{:L('act')}></th>

										</tr>

									</thead>

									<tbody>
										
										<foreach name="foodlist" item="food">

										<tr >

											<td><{$food.id}></td>

											<td><{$food.name}></td>

											<td>
												
												&nbsp; <foreach name="food.sauce" item="sauce">
													<input type="hidden" class="sauce_<{$food.id}>" data-sauce="<{$sauce.id}>" value="<{$sauce.name}>" />
													<{$sauce.name}>&nbsp; 
												</foreach>
												
											</td>

											<td>
												
												&nbsp;<foreach name="food.taste" item="taste">
													<input type="hidden" class="taste_<{$food.id}>" data-taste="<{$taste.id}>" value="<{$taste.name}>" />
													<{$taste.name}>&nbsp;  
												</foreach>
												
											</td>

											<td>
												
												&nbsp;<volist  name="food.extra" id="extra" key="k">
													<input type="hidden" class="extra_<{$food.id}>" data-extra="<{$extra.id}>" data-name="<{$extra.name}>" value="<{$extra.price}>" />
													<if condition="$extra.price neq ''">
														<{$extra.name}>:<{$extra.price}>
													<else />
														<{$extra.name}>
													</if>
														&nbsp;  
												</volist >
												
											</td>
											
											<td>
													
													<a href="#" class="btn black icn-only">
														
														<i class="m-icon-swapright m-icon-white"></i>
														
													</a>
												
											</td>

										</tr>
										
										</foreach>

									</tbody>

								</table>
								
								<!-- END EXAMPLE TABLE PORTLET-->

							</div>
							
							<div class="portlet-body form hide" id="fooddetail">
								
								<div class="form-horizontal form-view" id="foodname">

									<h3> </h3>
								
								</div>
								
								<!-- BEGIN FORM-->

								<form action="__ROOT__/Food/featureDo.html" method="post" class="form-horizontal form-bordered">
									
									<input type="hidden" name="foodid" id="foodid" value="" />

									<div class="control-group">

										<label class="control-label"><{:L('foodsauce')}></label>

										<div class="controls">
											
											<select id="foodsauce" class="span4">
																
												<option value="-1"><{:L('addOption')}></option>
													
												<foreach name="saucelist" item="sauce">
																	
													<option value="<{$sauce.id}>"><{$sauce.name}></option>
																	
												</foreach>
				
											</select>
											
											<a href="javascript:;" class="btn green left" onclick="addBadge('#foodsauce', '#sauceContainer', 'sauce');"><i class="icon-plus"></i>  <{:L('create')}></a>
															
											<div id="sauceContainer">
																
												<volist name="foodlist.sauce" id="selectedSauce">
													<div class="badge badge-large">
													<span><{$selectedSauce.name}></span>
													<input type="hidden" name="sauceBelongs[]" value="<{$selectedSauce.id}>" />
													<button type="button" class="close cred badge-close"></button>
													</div>
												</volist>
															
											</div>

										</div>

									</div>
									
									<div class="control-group">

										<label class="control-label"><{:L('foodtaste')}></label>

										<div class="controls">
											
											<select id="foodtaste" class="span4">
																
												<option value="-1"><{:L('addOption')}></option>
													
												<foreach name="tastelist" item="taste">
																	
													<option value="<{$taste.id}>"><{$taste.name}></option>
																	
												</foreach>
				
											</select>
											
											<a href="javascript:;" class="btn green left" onclick="addBadge('#foodtaste', '#tasteContainer', 'taste');"><i class="icon-plus"></i>  <{:L('create')}></a>
															
											<div id="tasteContainer">
																
												<volist name="foodlist.taste" id="selectedTaste">
													<div class="badge badge-large">
													<span><{$selectedSauce.name}></span>
													<input type="hidden" name="sauceBelongs[]" value="<{$selectedSauce.id}>" />
													<button type="button" class="close cred badge-close"></button>
													</div>
												</volist>
															
											</div>

										</div>

									</div>
									
									<div class="control-group">

										<label class="control-label"><{:L('foodextra')}></label>

										<div class="controls">

											<div id="extraList" class="collapse in">
												
												<table class="table table-striped" id="extra_table">
													<thead>
													<!-- 新增商品扩展属性 -->
														<tr>
															<th class="span2"></th>
															<th class="span2"></th>
															<th><a href="javascript:;" class="btn green" ><i class="icon-plus"></i>  <{:L('create')}></a></th>
														</tr>
													</thead>
													<tbody id="extraAll">
													<!-- 扩展属性列表 -->
														
													</tbody>
												</table>
											</div>

										</div>

									</div>

									<div class="form-actions">

										<button type="button" id="cancleEdit" class="btn"><i class="icon-remove"></i> <{:L('cancle')}></button>
										
										<button type="submit" class="btn blue"><i class="icon-ok"></i> <{:L('save')}></button>

									</div>

								</form>

								<!-- END FORM-->  

							</div>
							
							<div id="extraModal" class="modal hide fade" tabindex="-1" data-width="640">
							    <div class="modal-header">
							    	<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
							    	<h3><{:L('foodextra')}><{:L('edit')}></h3>
							    </div>
							    <div class="modal-body">
							    	<form class="form-horizontal" id="modalForm">
									    <div class="alert" id="errorShow" style="display: none;">
										  	<button type="button" class="close" data-dismiss="alert">&times;</button>
										  	<strong><{:L('inputError')}></strong> 
										</div>
									    <div class="control-group">
									    	<label class="control-label" for="extraName"><{:L('foodextra')}></label>
									    	<div class="controls">
									    		<select class="span3" id="extraName" name="extraName" onchange="checkExtraType(this, '#extraPrice')">
									    			<option value="-1"><{:L('select')}></option>
									    			<volist name="extralist" id="extra">
									    				<option value="<{$extra.id}>" data-type="<{$extra.type}>"><{$extra.name}></option>
									    			</volist>
									    		</select>
									    	</div>
									    </div>
									    <div class="control-group hide">
									    	<label class="control-label" for="extraPrice"><{:L('price')}></label>
									    	<div class="controls">
									    		<input type="text" id="extraPrice" name="extraPrice" placeholder="<{:L('goodsprice')}>" />
									    	</div>
									    </div>
							    	</form>
							    </div>
							    <div class="modal-footer">
							    	<input type="hidden" id="oldExtra" value="" />
							    	<input type="hidden" value="" id="actionType" />
							    	<a href="javascript:;" class="btn" data-dismiss="modal"><{:L('close')}></a>
							    	<a href="javascript:;" class="btn blue saveExtra"><{:L('save')}></a>
							    </div>
							</div>
							
						</div>
						
					</div>

				</div>
				<!-- END PAGE CONTENT-->

			</div>

			<!-- END PAGE CONTAINER-->

		</div>

		<!-- END PAGE -->

	</div>

	<!-- END CONTAINER -->
	
	<include file="Public/footer" />
	
	<!-- BEGIN PAGE LEVEL PLUGINS -->

	<script type="text/javascript" src="__PUBLIC__/js/jquery.dataTables.js"></script>

	<script type="text/javascript" src="__PUBLIC__/js/DT_bootstrap.js"></script>

	<!-- END PAGE LEVEL PLUGINS -->

	<!-- BEGIN PAGE LEVEL SCRIPTS -->

	<script src="__PUBLIC__/js/app.js"></script>

	<script src="__PUBLIC__/js/table-basic.js"></script>
	
	<script src="__PUBLIC__/js/form-samples.js"></script>
	   

	<script>

		jQuery(document).ready(function() {       

		   	App.init();

		   	TableBasic.init('feature_table', [6, 0, []]);
		   
		   	$("#feature_table").delegate("a", "click", function(event){
		   		var targetNode = event.srcElement || event.target;
				var targetObj = $(targetNode);
		   		if(!targetObj.hasClass("btn")){
					targetObj = targetObj.parent();
				}
				$foodid = targetObj.parent().parent().find("td").eq(0).html();
		   		$("#foodname h3").html(targetObj.parent().parent().find("td").eq(1).html() + "<{:L('mangage')}>");
		   		$("#foodid").val($foodid);
		   		addBadgeBackground('.sauce_' + $foodid, '#sauceContainer', 'sauce');
		   		addBadgeBackground('.taste_' + $foodid, '#tasteContainer', 'taste');
		   		addExtraBackground('.extra_' + $foodid, '#extraAll');
				$("#foodlist").addClass("hide");
				$("#fooddetail").removeClass("hide");
			});
			
			$("select#foodtaste").select2();
			
			$("select#foodsauce").select2();
			
			
			$("#cancleEdit").click(function(event){
				$("#fooddetail").addClass("hide");
				$("#foodlist").removeClass("hide");
			});
			
			$("#fooddetail").delegate("button.badge-close", "click", function(){
				removeBadge(this);
			});
			
			$("#extra_table").delegate("a", "click", function(event){
				var targetNode = event.srcElement || event.target;
				var targetObj = $(targetNode);
				if(!targetObj.hasClass("btn")){
					targetObj = targetObj.parent();
				}
				if(targetObj.hasClass("blue")){
					$("#extraPrice").val(targetObj.parent().prev().find("input").val());
					$("#extraName").val(targetObj.parent().parent().children().first().find("input.extraId").val());
					$("#oldExtra").val(targetObj.parent().parent().children().first().find("input.extraId").val());
					if($("#extraName").find("option:selected").attr("data-type") === 'size'){
						$("#extraPrice").parent().parent().removeClass("hide");
					}
					$("#actionType").val("edit");
					$('#errorShow').css('display', 'none');
					$("#extraModal").modal();
				}else if(targetObj.hasClass("red")){
					 targetObj.parent().parent().remove();
				}else if(targetObj.hasClass("green")){
					$("#extraName").val("-1");
					$("#extraPrice").parent().parent().val("");
					$("#oldExtra").val("");
					$("#actionType").val("create");
					$("#extraPrice").parent().parent().addClass("hide");
					$('#errorShow').css('display', 'none');
					$("#extraModal").modal();
				}
			});
			
			$(".saveExtra").click(function(){
				if($("#actionType").val() === "create"){
					if($("#extraName").val() === '-1' || ($("#extraName").find("option:selected").attr("data-type") === 'size' && $("#extraPrice").val() === '')){
						$('#errorShow').css('display', 'block');
						return false;
					}
					$flag = false;
					$("tbody#extraAll tr").each(function(){
						if($(this).find("input.extraId").val() == $("#extraName").val()){
							$flag = true;
						}
					});
					if($flag){
						$('#errorShow').css('display', 'block');
						return false;
					}
					var html = '<tr><td><p class="cred">' + $("#extraName").find("option:selected").html() +
							'</p><input type="hidden" class="extraId" value="' + $("#extraName").val() +
							'" /></td><td><input type="hidden" name="price['+ $("#extraName").val() +
							']" value="' + $("#extraPrice").val() + 
							'" /><p>' + $("#extraPrice").val() + '</p></td><td>' +
							'<a href="javascript:;" class="btn blue" ><i class="icon-pencil"></i>  <{:L(\'edit\')}></a>&nbsp;&nbsp;' +
							'<a href="javascript:;" class="btn red" ><i class="icon-minus"></i>  <{:L(\'delete\')}></a>' +
							'</td></tr>';
					$('tbody#extraAll').append(html);
				}else if($("#actionType").val() === "edit"){
					var editObj = $("#extra_table tr input[type='hidden'][value='" + $("#oldExtra").val() +"']").parent().parent();
					editObj.children().eq(0).find("p").html($("#extraName option[value='" + $("#extraName").val() + "']").html());
					editObj.children().eq(0).find("input").val($("#extraName").val());
					//错误
					editObj.children().eq(1).find("input").attr('name', 'price[' + $("#extraName").val() + ']');
					editObj.children().eq(1).find("input").val($("#extraPrice").val());
					editObj.children().eq(1).find("p").html($("#extraPrice").val());
				}
				$("#extraModal").modal("hide");
				$("#extraPrice").parent().parent().addClass("hide");
			});
		});

	</script>
	

<script type="text/javascript">  
//var _gaq = _gaq || [];  _gaq.push(['_setAccount', 'UA-37564768-1']);  _gaq.push(['_setDomainName', 'keenthemes.com']);  _gaq.push(['_setAllowLinker', true]);  _gaq.push(['_trackPageview']);  
//(function() {    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;    ga.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'stats.g.doubleclick.net/dc.js';    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);  })();
</script>

</body>

<!-- END BODY -->

</html>